/* 内河涌 弹框 排水口信息页 
 * @ 劳兆城 
 * @ 2017-07-20*/

<template>
	<div class="water-outfall clear">
		<div class="water-outfall-table pull-left">
			<div class="table">
				<Table 
					@on-row-click="rowClick" 
					:columns="table.thead" 
					:data="table.tbody" 
					size="small" 
					highlight-row 
					border></Table>				
			</div>
			<div class="page">
				<Page 
					:total="table.total" 
					@on-change="pageChange" 
					size="small" 
					show-total></Page>				
			</div>
		</div>
		<div class="water-outfall-info pull-left">
			<div class="water-outfall-box clear">
				<div class="water-outfall-box-left pull-left">
					<div class="outfall-row">
						<div class="outfall-title">排水口编号</div>
						<div class="outfall-content">
							<Input v-model="water.pntcode" size="small" placeholder="请输入"></Input>
						</div>
					</div>
					<div class="outfall-row">
						<div class="outfall-title">岸别</div>
						<div class="outfall-content">
							<Select v-model="water.pntdir" size="small" placeholder="请选择">
								<Option value="左岸" key="左岸">左岸</Option>
								<Option value="右岸" key="右岸">右岸</Option>
							</Select>
						</div>
					</div>
					<div class="outfall-row">
						<div class="outfall-title">排水类别</div>
						<div class="outfall-content">
							<Input v-model="water.trntype" size="small" placeholder="请输入"></Input>
						</div>
					</div>
					<div class="outfall-row">
						<div class="outfall-title">排水来源</div>
						<div class="outfall-content">
							<Input v-model="water.trnsource" size="small" placeholder="请输入"></Input>
						</div>
					</div>
					<div class="outfall-row">
						<div class="outfall-title">排水口尺寸(mm)</div>
						<div class="outfall-content">
							<Input v-model="water.trnsieze" size="small" placeholder="请输入"></Input>
						</div>
					</div>
					<div class="outfall-row">
						<div class="outfall-title">排水口管底高程(m)</div>
						<div class="outfall-content">
							<Input v-model="water.trnheight" size="small" placeholder="请输入"></Input>
						</div>
					</div>
					<div class="outfall-row">
						<div class="outfall-title">地理位置</div>
						<div class="outfall-content">
							<Input v-model="water.pntplace" size="small" placeholder="请输入"></Input>
						</div>
					</div>
					<div class="outfall-row">
						<div class="outfall-title">年均排水量(吨)</div>
						<div class="outfall-content">
							<Input v-model="water.trntonnage" size="small" placeholder="请输入"></Input>
						</div>
					</div>
					<div class="outfall-row">
						<div class="outfall-title">整治情况</div>
						<div class="outfall-content">
							<Select v-model="water.trnhandleway" size="small" placeholder="请选择">
								<Option value="保持现状" key="保持现状">保持现状</Option>
								<Option value="截污" key="截污">截污</Option>
								<Option value="封堵" key="封堵">封堵</Option>
							</Select>
						</div>
					</div>
					<div class="outfall-row">
						<div class="outfall-title">整治年份</div>
						<div class="outfall-content">
							<Input v-model="water.trnhandleyear" size="small" placeholder="请输入"></Input>
						</div>
					</div>
				</div>
				<div class="water-outfall-box-right pull-left">
					<loading type="circular" v-show="showLoading"></loading>
					<img 
						v-show="water.zoomimgpath" 
						:src="`http://183.238.82.210:8090/ztwater/fileupdown.viewzoomimage.d?picname=${water.zoomimgpath}`" />
					<img 
						v-show="!water.zoomimgpath || havePicture" 
						src="../../img/aPictureNoPicture.png" />
				</div>
			</div>	
			<div class="water-outfall-flexBox">
				<div class="outfall-row">
					<div class="outfall-title">建档日期</div>
					<div class="outfall-content">
						<Date-picker 
							:value="water.builddate" 
							@on-change="dateChange" 
							@on-open-change="dateOpenChange('builddate')" 
							placement="top" 
							size="small" 
							type="date" 
							placeholder="选择日期"></Date-picker>
					</div>
				</div>
				<div class="outfall-row">
					<div class="outfall-title">建档人</div>
					<div class="outfall-content">
						<Input 
							v-model="water.buildman" 
							size="small" 
							placeholder="请输入"></Input>
					</div>
				</div>
			</div>
			<div class="water-outfall-flexBox">
				<div class="outfall-row">
					<div class="outfall-title">采集日期</div>
					<div class="outfall-content">
						<Date-picker 
							:value="water.coldate" 
							@on-change="dateChange" 
							@on-open-change="dateOpenChange('coldate')" 
							placement="top" 
							size="small" 
							type="date" 
							placeholder="选择日期" ></Date-picker>
					</div>
				</div>
				<div class="outfall-row">
					<div class="outfall-title">采集人</div>
					<div class="outfall-content">
						<Input 
							v-model="water.colman" 
							size="small" 
							placeholder="请输入"></Input>
					</div>
				</div>
			</div>
			<div class="water-outfall-flexBox">
				<div class="outfall-row">
					<div class="outfall-title">备注</div>
					<div class="outfall-content">
						<Input v-model="water.pntcomment" type="textarea" size="small" class="water-textarea" placeholder="请输入"></Input>
					</div>
				</div>
			</div>
			<div class="outfall-buttons clear">
				<Button 
					@click.native="saveClick" 
					:disabled="!canSave" 
					class="pull-right" 
					type="primary" 
					size="small"
					style="margin-left: 10px;">保存</Button>
				<Button 
					@click.native="addClick" 
					class="pull-right" 
					size="small"
					type="success">新增</Button>
			</div>
		</div>
	</div>
</template>

<script>
	import { loadingMixin } from 'common/js/mixins'
import { singleWaterNetOutfall } from 'common/js/table'
import { successNotice, errorNotice, createHtml } from 'common/js/dom'
import { ERR_OK } from 'api/config'
import { getWaterOutfall, addWaterOutfall, editWaterOutfall, delWaterOutfall } from 'api/aPicture'

export default {
		mixins: [loadingMixin],
		computed: {
			canSave () {
				return JSON.stringify(this.water) !== '{}'
		},
			havePicture () {
				return JSON.stringify(this.water) === '{}'
		}
		},
		created () {
			this.page = 1
	
		this._getWaterOutfall()
	},
		data () {
			return {
				water: {},
				table: {
					thead: singleWaterNetOutfall(this),
					tbody: [],
					total: null
				},
				dateKey: '',
				showLoading: false
			}
		},
		methods: {
			rowClick (row) {
				this.showLoading = true
			this.water = row
			let img = createHtml('img')
			img.src = 'http://183.238.82.210:8090/ztwater/fileupdown.viewzoomimage.d?picname=' + row.zoomimgpath
			img.onload = () => {
					this.showLoading = false
			}
			},
			pageChange (page) {
				this.page = page
			this._getWaterOutfall(page)
		},
			dateChange (time) {
				this.water[this.dateKey] = time
		},
			dateOpenChange (str) {
				this.dateKey = str
		},
			_saveClick () {
				editWaterOutfall(this.water).then(res => {
					if (res.code === ERR_OK) {
						successNotice('保存成功')
					this._getWaterOutfall(this.page)
				} else {
						errorNotice('保存失败')
				}
				})
			},
			_addClick () {
				addWaterOutfall().then(res => {
					if (res.code === ERR_OK) {
						successNotice('新增成功')
					this._getWaterOutfall(this.page)
				} else {
						errorNotice('新增失败')
				}
				})
			},
			_delClick (row) {
				_delWaterOutfall(row.strivkeypntid).then(res => {
					if (res.code === ERR_OK) {
						successNotice('删除成功')
					this._getWaterOutfall(this.page)
					this.water = {}
				} else {
						errorNotice('删除失败')
				}
				})
			},
			_getWaterOutfall (page) {
				getWaterOutfall(page).then(res => {
					if (res.code === ERR_OK) {
						this.table.tbody = res.result.result
					this.table.total = res.result.totalSize
				}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.singleWaterNet-model {
		.water-outfall {
			width: 100%;
			height: 100%;
			padding: 0 5px;
			.water-outfall-table {
				width: calc(45% - 10px);
				height: 100%;
				position: relative;
				margin-right: 10px;
				.table {
					width: 100%;
					position: absolute;
					top: 5px;
					left: 0;
				}
				.page {
					position: absolute;
					bottom: 5px;
					right: 5px;
				}
			}
			.water-outfall-info {
				width: 55%;
				height: 100%;
				.water-outfall-box {
					width: 100%;
					height: 356px;
					.water-outfall-box-left {
						width: calc(45% - 10px);
						height: 100%;
						margin-right: 10px;
					}
					.water-outfall-box-right {
						width: 55%;
						height: 100%;
						position: relative;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
				.water-outfall-flexBox {
					display: flex;
					.outfall-row {
						flex: 1;
					}
				}
				.outfall-row {
					display: flex;
					align-items:center;
					margin: 5px 0;
					.outfall-title {
						width: 70px;
						font-size: 12px;
						text-align: right;
						padding-right: 5px;
						margin-top: 2px;
					}
					.outfall-content {
						flex: 1;
					}
				}
			}
		}	
	}
</style>